<template>
  <div ref="scrollContainer" >
      <acquire-customers class="row-container" v-if="hasPermission('system:home:get-huoke-data')" />
      <design class="row-container" v-if="hasPermission('system:home:design-data')" />
      <product class="row-container" v-if="hasPermission('system:home:product-data')" />
      <single v-if="hasPermission('system:home:single-product-data')" />
      <engineering v-if="hasPermission('system:home:engineering-data')" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'DashboardBase',
};
</script>

<script setup lang="ts">
import hasPermission from '@/utils/hasPermission';
import AcquireCustomers from '@/pages/report/acquire-customers/index.vue'
import Design from '@/pages/report/design/index.vue'
import Product from '@/pages/report/product/index.vue'
import Single from '@/pages/report/single/index.vue'
import Engineering from '@/pages/report/engineering/index.vue'
import { onActivated, onBeforeUnmount, onDeactivated, onMounted, ref } from 'vue';

const scrollContainer = ref<HTMLElement | null>(null);
const scrollPosition = ref(0);
// 保存滚动位置
const saveScrollPosition = () => {
  if (scrollContainer.value) {
    scrollPosition.value = scrollContainer.value.scrollTop;
  }
};

// 恢复滚动位置
const restoreScrollPosition = () => {
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = scrollPosition.value;
  }
};

// 监听滚动事件
const setupScrollListener = () => {
  scrollContainer.value?.addEventListener('scroll', saveScrollPosition);
};

const removeScrollListener = () => {
  scrollContainer.value?.removeEventListener('scroll', saveScrollPosition);
};

onMounted(() => {
  setupScrollListener();
});

onBeforeUnmount(() => {
  removeScrollListener();
});

// 组件激活时恢复滚动位置
onActivated(() => {
  restoreScrollPosition();
});

// 组件停用时保存滚动位置
onDeactivated(() => {
  saveScrollPosition();
});
</script>

<style scoped>
.row-container:not(:last-child) {
  margin-bottom: 16px;
}
.heightcl {
  height: calc(100vh - 190px);
  overflow-y: auto;
}
</style>